<template>
    <div class="cmt-container">
        <h4>发表评论</h4>
        <textarea v-model="msg" placeholder="请输入评论内容（最多100字）" maxlength="100"></textarea>
        <mt-button @click="postComment" type="primary" size="large">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="i">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户名：{{item.use_name}}&nbsp;&nbsp;发表时间：{{item.add_time}}
                </div>
                <div class="cmt-body">
                    {{item.content === "undefined" ? '此用户没有评论':item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">{{this.moreText}}</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';

    export default{
        data(){
            return {
                sliceNum:3,
                moreText:'加载更多',
                comments:[],
                msg:''//评论输入的内容
            }
        },
        props:['id'],
        created(){
            this.getComment();
        },
        methods: {
            //发表评论
            postComment(){
                if (this.msg.trim().length === 0){
                    return Toast("评论内容不能为空！");
                }
                this.$http.get("src/mock/comment.json",{content:this.msg.trim()}).then(result=>{

                    if (result.status === 200){
                        var cmt = {
                            use_name:"匿名用户",
                            add_time:Date.now(),
                            content:this.msg.trim()
                        }
                        this.comments.unshift(cmt);
                        this.msg = '';

                    }else {
                        Toast("发表评论失败！")
                    }
                })
            },
            //获取评论信息
            getComment(){
                this.$http.get("src/mock/comment.json").then(result=>{
                    if (result.status === 200){
                        this.comments = result.body.reverse().slice(0,this.sliceNum);
                    }else {
                        Toast("获取评论失败！")
                    }
                })
            },
            //获取更多评论信息
            getMore(){
                this.$http.get("src/mock/comment.json").then(result=>{
                    if (result.status === 200){
                        this.comments = this.comments.concat(result.body.reverse().slice(this.sliceNum,this.sliceNum+3));
                        this.sliceNum+=3;
                        if (this.comments.length == result.body.length){
                            this.moreText = '没有更多评论了';
                            this.sliceNum = result.body.length;
                        }

                    }else {
                        Toast("获取评论失败！")
                    }
                })
            }
        },
        computed: {},
        components: {}
    }
</script>
<style lang="scss" scoped>
.cmt-container{
    padding: 5px;
    h4{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 10px 0;
        .cmt-item{
            font-size: 12px;
            .cmt-title{
                line-height: 30px;
                background: #CCCCCC;
                padding-left: 5px;
            }
        }
        .cmt-body{
            line-height: 35px;
            text-indent: 24px;
        }
    }
    .mint-button--danger.is-plain {
        border: 1px solid #ef4f4f;
        background-color: #ef4f4f;
        color: #ffffff;
        margin-top: 30px;
    }
}
</style>